import { Button, Skeleton } from 'antd';
import { BookOutlined } from '@ant-design/icons';
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

interface BookCardProps {
    book: {
        id: number;
        image: string;
        title: string;
        name: string;
        publishTime: string;
    };
    onViewDetail: (bookId: number) => void;
}

export default function BookCard({ book, onViewDetail }: BookCardProps) {
    const navigate = useNavigate();
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const timer = setTimeout(() => {
            setLoading(false);
        }, 2000);

        return () => clearTimeout(timer);
    }, []);

    const handleViewDetail = () => {
        navigate(`/book/${book.id}`);
    };

    if (loading) {
        return (
            <div className="block bg-white rounded-lg shadow-md">
                <div className="relative w-full h-[160px]">
                    <Skeleton.Image 
                        className="w-full h-full rounded-t-lg" 
                        style={{ width: '100%', height: '160px' }}
                        active
                    />
                </div>
                <div className="p-4">
                    <Skeleton active paragraph={{ rows: 2 }} />
                    <div className="w-full mt-4 flex items-center justify-between border-t border-gray-100 pt-3">
                        <Skeleton.Button 
                            active 
                            size="small" 
                            style={{ width: '120px', marginRight: 'auto' }} 
                        />
                        <Skeleton.Button 
                            active 
                            size="small" 
                            style={{ width: '80px' }} 
                        />
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="block bg-white rounded-lg shadow-md hover:shadow-xl hover:scale-[1.02] transition-all duration-300 ease-in-out cursor-pointer">
            <div className="relative w-full h-[160px]">
                <img 
                    src={book.image} 
                    alt={book.title}
                    className="w-full h-full object-cover rounded-t-lg"
                />
            </div>
            <div className="p-4">
                <h3 className="text-lg font-semibold truncate mb-2">{book.name}</h3>
                <p className="text-gray-600 text-sm line-clamp-2 min-h-[40px]">{book.title}</p>
                <div className="mt-4 flex items-center justify-between border-t border-gray-100 pt-3">
                    <span className="text-gray-500 text-xs">上架时间：{book.publishTime}</span>
                    <Button 
                        type="primary"
                        onClick={handleViewDetail}
                        size="small"
                    >
                        查看详情
                    </Button>
                </div>
            </div>
        </div>
    );
} 